<template>

<div id="updateShareCode">
  <el-row>
    <mu-appbar title="赠送金币" style="background-color:#409EFF" v-if="!this.isWhite">
      <mu-icon-button  icon="arrow_back_ios" slot="left" :to="{name: 'GmMenu' }"/>
    </mu-appbar>
    <mu-appbar title="赠送金币" style="background-color:#409EFF" v-if="this.isWhite">
      <mu-icon-button  icon="arrow_back_ios" slot="left" :to="{name: 'Home' }"/>
    </mu-appbar>
  </el-row>
  <el-tabs v-model="tabName">
    <el-tab-pane label="玩家代理" name="first">
      <el-row>
        <el-col :span="12">
        </el-col>
        <el-col :span="12">
          <i class="el-icon-arrow-down" style="float:right" @click="handleTools"></i>
        </el-col>
      </el-row>

      <div class= "tools" v-show="tools">
        <el-row>
          <el-col :xs="6" :sm="4" :md="3" :lg="3">
            玩家账号
          </el-col>
          <el-col :xs="18" :sm="20" :md="21" :lg="21">
            <el-input v-model="condition.uid" size="mini" @blur="getUsers"></el-input>
          </el-col>
        </el-row>
          <!-- <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-col :xs="6" :sm="6" :md="6" :lg="6">
              起始日期
            </el-col>
            <el-col :xs="18" :sm="18" :md="18" :lg="18">
              <el-date-picker
                v-model="condition.startDay"
                type="date"
                placeholder="选择起始日期"
                size="mini"
                @change="getUsers"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-col>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-col :xs="6" :sm="6" :md="6" :lg="6">
              结束日期
            </el-col>
            <el-col :xs="18" :sm="18" :md="18" :lg="18">
              <el-date-picker
                v-model="condition.endDay"
                type="date"
                placeholder="选择结束日期"
                size="mini"
                @change="getUsers"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-col>
          </el-col> -->
      </div>

      <el-dialog title="赠送金币" :visible.sync="dialogFormVisible">
        <el-row>
          <span v-if="this.isWhite" style="color:red;">可以金币: {{this.leftNdot}}</span>
        </el-row>
        <el-form :model="form">
          <el-form-item label="玩家ID">
            <el-input v-model="form.uid" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="赠送数量">
            <el-input v-model="form.ndot" size="mini"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </el-dialog>

      <el-row>
        <el-table
          :data="tableData"
          style="width: 100%"
          size="mini">
          <el-table-column
            prop="uid"
            label="玩家ID">
          </el-table-column>
          <el-table-column
            prop="binderUid"
            label="上级ID">
          </el-table-column>
          <!-- <el-table-column
            prop="organizer"
            label="顶级ID">
          </el-table-column> -->
          <el-table-column
            prop="nickName"
            label="昵称">
          </el-table-column>
          <el-table-column
            prop="ndot"
            label="当前金币">
            <template slot-scope="scope">
              <span>{{scope.row.ndot}}个</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="isAgent"
            label="是否代理">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="注册时间">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleUpdate(scope.row)">赠送金币</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <el-row>
        <center>
          <el-pagination
            small
            layout="prev, pager, next"
            :total="condition.total"
            :page-size="condition.pageSize"
            :current-page="condition.currentPage"
            @current-change="handleCurrentChange">
          </el-pagination>
        </center>
      </el-row>
    </el-tab-pane>

    <el-tab-pane label="白户" name="second" v-if="this.isGm">
      <el-row>
        <el-col :span="12">
        </el-col>
        <el-col :span="12">
          <i class="el-icon-arrow-down" style="float:right" @click="handleTools"></i>
        </el-col>
      </el-row>

      <div class= "tools" v-show="tools">
        <el-row>
          <el-col :xs="6" :sm="5" :md="5" :lg="6">
            白户ID
          </el-col>
          <el-col :xs="18" :sm="19" :md="19" :lg="18">
            <el-input v-model="condition.uid" size="mini" @blur="getCa"></el-input>
          </el-col>
          <!-- <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-col :xs="6" :sm="6" :md="6" :lg="6">
              起始日期
            </el-col>
            <el-col :xs="18" :sm="18" :md="18" :lg="18">
              <el-date-picker
                v-model="condition.startDay"
                type="date"
                placeholder="选择起始日期"
                size="mini"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-col>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-col :xs="6" :sm="6" :md="6" :lg="6">
              结束日期
            </el-col>
            <el-col :xs="18" :sm="18" :md="18" :lg="18">
              <el-date-picker
                v-model="condition.endDay"
                type="date"
                placeholder="选择结束日期"
                size="mini"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-col> -->
          </el-col>
        </el-row>
      </div>

      <el-dialog title="赠送金币" :visible.sync="dialogFormVisibleca">
        <el-form :model="form">
          <el-form-item label="玩家ID">
            <el-input v-model="form.uid" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="赠送数量">
            <el-input v-model="form.ndot" size="mini"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleca = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmitWhite">确 定</el-button>
        </div>
      </el-dialog>

      <el-row>
        <el-table
          :data="tableDataCa"
          style="width: 100%"
          size="mini">
          <el-table-column
            prop="agentUid"
            label="白户账号">
          </el-table-column>
          <el-table-column
            prop="leftNdot"
            label="金币数量">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleUpdateca(scope.row)">赠送金币</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <el-row>
        <center>
          <el-pagination
            small
            layout="prev, pager, next"
            :total="condition.totalWhite"
            :page-size="condition.pageSizeWhite"
            :current-page="condition.currentPageWhite"
            @current-change="handleCurrentChangeWhite">
          </el-pagination>
        </center>
      </el-row>

    </el-tab-pane>
  </el-tabs>
</div>

</template>

<style>
#updateShareCode .el-dialog {
  width: 70%
}
#updateShareCode .el-row {
    margin-bottom: 16px;
  }
  #updateShareCode .el-col {
      margin-bottom: 8px;
    }
#updateShareCode .el-form-item__content {
    margin-bottom: -24px
  }
#updateShareCode form.el-form {
    margin-top: -24px;
  }
</style>

<script>
  import moment from 'moment'
  export default {
    data () {
      return {
        form: {
          uid: '',
          ndot: '',
          account: sessionStorage.getItem('account')
        },
        condition: {
          uid: '',
          currentPage: 1,
          pageSize: 10,
          total: 0,
          currentPageWhite: 1,
          pageSizeWhite: 10,
          totalWhite: 0,
          account: sessionStorage.getItem('account')
        },
        dialogFormVisibleca: false,
        dialogFormVisible: false,
        tools: true,
        tableData: [],
        tableDataCa: [],
        tabName: 'first',
        isWhite: false,
        isAdmin: false,
        isGm: false,
        leftNdot: 0
      }
    },
    methods: {
      validate () {
        if (this.form.uid !== '' && this.form.ndot !== '') {
          return true
        } else {
          this.$message({
            showClose: true,
            message: '请完善信息',
            type: 'success'
          })
          return false
        }
      },
      handleTools () {
        if (this.tools) {
          this.tools = false
        } else {
          this.tools = true
        }
      },
      init () {
        if (this.isGm) {
          this.getCa()
        }
        this.getUsers()
      },
      getUsers () {
        let that = this
        if (this.condition.uid === '' || this.condition.uid.length === 0) {
          this.condition.uid = -1
        }
        this.$axios({
          method: 'get',
          url: '/api/AgentService.getUsersForUpdateShareCode',
          params: this.condition
        })
        .then(function (resp) {
          that.condition.uid = ''
          if (resp.data.status === 'success') {
            that.tableData = resp.data.data
            for (let item in resp.data.data) {
              resp.data.data[item].createTime = moment.utc(resp.data.data[item].createTime).zone(-8).format('YYYY-MM-DD HH:mm:ss')
            }
            that.condition.total = resp.data.page.total
          }
        })
      },
      getCa () {
        let that = this
        if (this.condition.uid === '' || this.condition.uid.length === 0) {
          this.condition.uid = -1
        }
        this.$axios({
          method: 'get',
          url: '/api/CarrieroperatorService.getWhiteCarrieroperators',
          params: this.condition
        })
        .then(function (resp) {
          if (resp.data.status === 'success') {
            that.tableDataCa = resp.data.data
            that.condition.totalWhite = resp.data.page.total
          }
        })
      },
      handleUpdate (row) {
        this.dialogFormVisible = true
        this.form.uid = row.uid
        if (this.isWhite) {
          this.getLeftNdot()
        }
      },
      handleUpdateca (row) {
        this.dialogFormVisibleca = true
        this.form.uid = row.agentUid
      },
      handleSubmit () {
        let that = this
        if (typeof Number(this.form.ndot) !== 'number' || Number(this.form.ndot) % 1 !== 0 || Number(this.form.ndot) === 0) {
          this.$message({
            showClose: true,
            message: '请输入整数个金币',
            type: 'success'
          })
          return false
        }
        if (this.isWhite) {
          if (this.leftNdot < this.form.ndot) {
            this.$message({
              showClose: true,
              message: '不能大于可用金币',
              type: 'success'
            })
            return false
          }
        }
        if (this.validate()) {
          this.$axios({
            method: 'get',
            url: '/api/CarrieroperatorService.giveNdot',
            params: this.form
          })
          .then(function (resp) {
            if (resp.data.status === 'success') {
              that.$message({
                showClose: true,
                message: '赠送成功',
                type: 'success'
              })
              that.dialogFormVisible = false
              that.init()
              that.tabName = 'first'
            } else {
              that.$message({
                showClose: true,
                message: resp.data.cause,
                type: 'warning'
              })
            }
          })
        }
      },
      handleCurrentChange (val) {
        this.condition.currentPage = val
        this.getUsers()
      },
      handleCurrentChangeWhite (val) {
        this.condition.currentPage = val
        this.getCa()
      },
      handleSubmitWhite () {
        let that = this
        if (typeof Number(this.form.ndot) !== 'number' || Number(this.form.ndot) % 1 !== 0 || Number(this.form.ndot) === 0) {
          this.$message({
            showClose: true,
            message: '请输入整数个金币',
            type: 'success'
          })
          return false
        }
        this.$axios({
          method: 'get',
          url: '/api/CarrieroperatorService.giveNdotWhite',
          params: this.form
        })
        .then(function (resp) {
          if (resp.data.status === 'success') {
            that.$message({
              showClose: true,
              message: '赠送成功',
              type: 'success'
            })
            that.dialogFormVisibleca = false
            that.init()
            that.tabName = 'second'
          } else {
            that.$message({
              showClose: true,
              message: resp.data.cause,
              type: 'warning'
            })
          }
        })
      },
      getLeftNdot () {
        let that = this
        this.$axios({
          method: 'get',
          url: '/api/AgentService.getAvailableNdot',
          params: {'account': sessionStorage.getItem('account')}
        })
        .then(function (resp) {
          if (resp.data.status === 'success') {
            that.leftNdot = resp.data.data
          } else {
            that.$message({
              showClose: true,
              message: resp.data.cause,
              type: 'warning'
            })
          }
        })
      }
    },
    mounted () {
      if (sessionStorage.getItem('role') === 'white') {
        this.isWhite = true
      }
      if (sessionStorage.getItem('role') === 'admin') {
        this.isAdmin = true
      }
      if (sessionStorage.getItem('role') === 'gm') {
        this.isGm = true
      }
      this.init()
    }
  }
</script>
